<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="../../css/animate.css">
		<link rel="stylesheet" href="../../iconfont/iconfont.css">
		<link rel="stylesheet" href="../../css/mescroll.css">
		<link rel="stylesheet" href="../../css/gloab.css">
		<title>个人中心</title>
		<style media="screen">
			input[disabled]{color:#000;opacity:1}
  .title-form-div{
    width: 100%;
    height: 80%;
    position: relative;
    top: 0rem;
  }
  .title-div{
    width: 90%;
    height: 0.65rem;
    margin: 0rem auto 0.25rem;
    background: #f3f8fe;
    overflow: hidden;
    border-radius: 0.5rem;
  }
  .title-div i{
    font-size: 0.5rem;
    line-height: 0.65rem;
    color: #ffc514;
    padding-left: 0.2rem;
    float: left;
  }
  .title-div span{
    width: 80%;
    display: inline-block;
    height: 0.65rem;
    float: left;
  }
  .title-div input{
    height: 0.5rem;
    margin: 0.05rem 0.1rem;
    width: 90%;
    background: #f3f8fe;
    line-height: 0.65rem;
    font-size: 0.36rem;
    padding-left: 0.1rem;
    border-radius: 0.5rem;
  }
  .title-span-button{
    width: 38%;
    text-align: center;
    line-height: 0.65rem;
    background: #4293f2;
    color:#fff;
  }
  </style>
	</head>
	<body>
		<div id="app">
			<div id="header" style="margin-bottom:-0.25rem;">
				<div id="statusbar"></div>
				<header class="flex wrap">
					<div class="personal-back iconfont icon-fanhui" @click="close"></div>
					<div class="personal-empty" style="width:70%;height:1px;"></div>
					<div class="personal-set iconfont icon-shezhi" @click="shezhi"></div>
					<div class="personal-exit iconfont icon-dengchu1" style="font-size:0.4rem;" @click="logout"></div>
				</header>
			</div>
			<div class="personal-header flex wrap">
				<div class="personal-header-lf">
					<img src="../../image/public/touxiang.png" alt="" v-if="!list.avatar" @click="uploadAvatar">
					<img :src="apiUrl1+list.avatar" alt="" v-else @click="uploadAvatar">
					<label class="personal-header-zzlabel" v-if="list.Identity==2" style="background:#ffc043;color:#fff;">站长</label>
					<label class="personal-header-zzlabel" v-if="list.Identity==3" style="background:#ffc043;color:#fff;">合伙人</label>
					<label class="personal-header-gflabel personal-header-zzlabel" v-if="list.Identity==1" style="background:#ffc043;color:#fff;">{{list.ranks}}</label>
				</div>
				<div class="personal-header-rt flex wrap">
					<div class="personal-header-rt-lf">
						<p style="overflow:hidden;width:80%;height:0.45rem;line-height:0.45rem;">用户昵称：{{list.nickname}}</p>
						<!-- VIP等级：<span class="personal-header-vip">{{list.ranks}}</span> -->
						<!-- &nbsp;&nbsp; -->
						<span class="my-fz" @click="javascript:api.openWin({name: 'my_fenzhan',url:'./my_fenzhan.html',allowEdit:true});">我的分站</span>
						<span class="my-dj" style="background-color: red;">我的等级：{{list.type_name}}</span> 
						<br>
						我的邀请码：<span class="">{{list.code}}</span>
					</div>
					<div class="personal-header-rt-rt" @click="signIn" v-show='!is_SignIn'>
						<span>签到</span>
					</div>
					<div class="personal-header-rt-rt" v-show='is_SignIn'>
						<span>今日已签到</span>
					</div>
				</div>
			</div>
			<div class="personal-count flex">
				<div class="personal-count-son F3">
					<div class="personal-count-tp">
						<span class="iconfont icon-qianbao">余额</span>
						&nbsp;
						<span class="personal-count-btn" @click="javascript:api.openWin({name: 'tixian',reload:true,url:'./tixian.html',pageParam:{price:list.balance}});">提现</span>
						&nbsp;
						<span class="personal-count-btn" style="background-color:#f95f5f;" @click="javascript:api.openWin({name: 'recharge',reload:true,url:'./recharge.html',});">充值</span>
					</div>
					<p>{{list.balance}}</p>
				</div>
				<div class="personal-count-son F2">
					<div class="personal-count-tp">
						<span class="iconfont icon-qianbao">积分</span>
						&nbsp;
						<span class="personal-count-btn" style="background-color:#f95f5f;" @click="javascript:api.openWin({name: 'buy_jifen',reload:true,url:'./buy_jifen.html',});">购买</span>
					</div>
					<p v-show="list.score">{{list.score}}</p>
					<p v-show="!list.score">0.00</p>
				</div>
			</div>
			<div class="personal-navbar">

				<div class="personal-navbar-son flex" @click="javascript:api.openWin({name: 'myfabu_guanggao',reload:true,url:'./myfabu_guanggao.html',});">
					<div class="personal-navbar-son-fl F1">
						<img src="../../image/personal/personal2.png" alt="">
						<span>我发布的广告</span>
					</div>
					<div class="personal-navbar-son-rt F1 flex wrap">
						<div class="F1">
							<span>
								<font>置顶/</font>
								<font>刷新/</font>
								<font>排名查看</font>
							</span>
						</div>
						<div style="margin-top:0.02rem;">
							<span class="iconfont icon-qianwang"></span>
						</div>
					</div>
				</div>
				<div class="personal-navbar-son flex" @click="zixuntjr">
					<div class="personal-navbar-son-fl F1">
						<img src="../../image/personal/personal7.png" alt="">
						<span>联系推荐人</span>
					</div>
					<div class="personal-navbar-son-rt F1">
						<span class="iconfont icon-qianwang"></span>
					</div>
				</div>
				<div class="personal-navbar-son flex" @click="javascript:api.openWin({name: 'srmx',reload:true,url:'./srmx.html',});">
					<div class="personal-navbar-son-fl F1">
						<img src="../../image/personal/personal3.png" alt="">
						<span>收入明细</span>
					</div>
					<div class="personal-navbar-son-rt F1">
						<span class="iconfont icon-qianwang"></span>
					</div>
				</div>
				<div class="personal-navbar-son flex" @click="javascript:api.openWin({name: 'tixianjilu',reload:true,url:'./tixianjilu.html',});">
					<div class="personal-navbar-son-fl F1">
						<img src="../../image/personal/personal4.png" alt="">
						<span>提现记录</span>
					</div>
					<div class="personal-navbar-son-rt F1">
						<span class="iconfont icon-qianwang"></span>
					</div>
				</div>
			<!-- 	<div class="personal-navbar-son flex" @click="javascript:api.openWin({name: 'addcode',reload:true,url:'./addcode.html',});">
					<div class="personal-navbar-son-fl F1">
						<img src="../../image/personal/personal2.png" alt="">
						<span>添加邀请码</span>
					</div>
					<div class="personal-navbar-son-rt F1">
						<span class="iconfont icon-qianwang"></span>
					</div>
				</div> -->
				<div class="personal-navbar-son flex" @click="javascript:api.openWin({name: 'chongzhi',reload:true,url:'./chongzhi.html',});">
					<div class="personal-navbar-son-fl F1">
						<img src="../../image/personal/personal4.png" alt="">
						<span>积分明细</span>
					</div>
					<div class="personal-navbar-son-rt F1">
						<span class="iconfont icon-qianwang"></span>
					</div>
				</div>
				<!-- <div class="personal-navbar-son flex" @click="javascript:api.openWin({name: 'jifen',url:'./jifen.html',});">
        <div class="personal-navbar-son-fl F1">
          <img src="../../image/personal/personal4.png" alt="">
          <span>积分交易记录</span>
        </div>
        <div class="personal-navbar-son-rt F1">
            <span class="iconfont icon-qianwang"></span>
        </div>
      </div> -->
				<div class="personal-navbar-son flex" @click="javascript:api.openWin({name: 'myrenman',reload:true,url:'./myrenman.html',});">
					<div class="personal-navbar-son-fl F1">
						<img src="../../image/personal/personal5.png" alt="">
						<span>我的人脉</span>
					</div>
					<div class="personal-navbar-son-rt F1">
						<span class="iconfont icon-qianwang"></span>
					</div>
				</div>
				<!-- <div class="personal-navbar-son flex" @click="zzad">
					<div class="personal-navbar-son-fl F1">
						<img src="../../image/public/ad.png" alt="">
						<span>站长广告</span>
					</div>
					<div class="personal-navbar-son-rt F1">
						<span class="iconfont icon-qianwang"></span>
					</div>
				</div> -->
				<div class="personal-navbar-son flex" @click="javascript:api.openWin({name: 'helpcenter',reload:true,url:'./helpcenter.html',});">
					<div class="personal-navbar-son-fl F1">
						<img src="../../image/public/help.png" alt="">
						<span>帮助中心</span>
					</div>
					<div class="personal-navbar-son-rt F1">
						<span class="iconfont icon-qianwang"></span>
					</div>
				</div>
				<div class="personal-navbar-son flex" @click="zixun">
					<div class="personal-navbar-son-fl F1">
						<img src="../../image/personal/personal7.png" alt="">
						<span>联系客服</span>
					</div>
					<div class="personal-navbar-son-rt F1">
						<span class="iconfont icon-qianwang"></span>
					</div>
				</div>
				<div class="personal-navbar-son flex" @click="javascript:api.openWin({name: 'about_us',reload:true,url:'./about_us.html',});">
					<div class="personal-navbar-son-fl F1">
						<img src="../../image/personal/personal8.png" alt="">
						<span>关于我们</span>
					</div>
					<div class="personal-navbar-son-rt F1">
						<span class="iconfont icon-qianwang"></span>
					</div>
				</div>
			</div>
			<div class="qiandao-modify" style="display:none;">
				<div class="qiandao-modify-center">
					<div class="qiandao-modify-close" @click="del"><img src="../../image/close.png" alt=""></div>
					<div class="qiandao-modify-text">
						<p>恭喜你签到成功！今天获得</p>
						<p>{{integral}}积分</p>
						<p>继续保持哟！</p>
					</div>
					<div class="qiandao-modify-btn" @click="del">立即领取</div>
				</div>
			</div>
			<div class="add-modify" id="add-modify" style="display:none;">
				<div class="add-modify-center" style="margin-top:2.5rem;height:auto;background-image: url(../../image/personal/personal10.png);">
					<div class="add-modify-title">客服微信号</div>
					<div class="add-modify-text">{{kefu.wechat}}&nbsp;<span style="color:#fff;background-color:#519ef6;padding: 0 0.1rem;"
						 @click="copy">复制</span></div>
					<div class="add-modify-title" style="margin-top:0.6rem;">微信二维码</div>
					<div class="add-modify-ewm" style="margin-top:0.1rem;"><img :src="apiUrl+kefu.wechat_code" alt=""></div>
					<div class="add-modify-btn" style="margin:0.24rem auto;" @click="quxiao">确认</div>
				</div>
			</div>
			<div class="add-modify" id="add-modifys" style="display:none;" v-if="codes">
				<div class="add-modify-center" style="margin-top:3rem;height:auto;background-image: url(../../image/personal/personal10.png);">
					<div class="add-modify-title" style="height:1rem;line-height:0.8rem;font-size:0.35rem;">推荐人微信号</div>
					<!-- <div class="add-modify-text" v-if="tjr.wechat" style="height:1rem;line-height:0.8rem;font-size:0.35rem;color:#000;">{{tjr.wechat}}&nbsp;
        </div> -->
					<div class="title-form-div" v-if="codes">
						<div class="title-div">
							<div class="" style="width:25px;height:1rem;float:left;line-height:1rem;margin-left:0.22rem;">
								<img src="../../image/public/code.png" alt="">
							</div>
							<span>
								<input type="text" v-model="codes" disabled="disabled">
							</span>
						</div>
					</div>
					<div class="add-modify-text" style="height:1rem;line-height:0.8rem;font-size:0.35rem;color:#000;" v-else>未添加&nbsp;</div>
					<!-- <div class="add-modify-title" style="margin-top:0.6rem;">微信二维码</div> -->
					<!-- <div class="add-modify-ewm" id="qrcode" style="margin-top:0.1rem;margin-left:0.5rem;"></div> -->
					<div class="add-modify-btn" style="margin:0.14rem auto;width:40%;height:0.65rem;line-height:0.65rem;font-size:0.35rem;"
					 @click="copys">复制</div>
					<!-- <div class="add-modify-btn" style="margin:0.24rem auto;" @click="quxiaos">确认</div> -->
				</div>
			</div>
		</div>
		<div class="public-progress" style="z-index:9;">
			<img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
		</div>
	</body>
	<script src="../../script/api.js"></script>
	<script src="../../script/jquery.js"></script>
	<script src="../../script/mescroll.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/app.js"></script>
	<script src="../../script/jsencrypt.js"></script>
	<!-- <script src="../../script/qrcode.js"></script> -->
	<script src="../../script/fastclick.js"></script>

	<script>
		var vm;
		var mescroll;
		apiready = function() {
			api.removeLaunchView();
			setBar("statusbar");
			setFont(750);
			startVue();
			$(".public-progress").fadeOut(1000);
			setTimeout(function() {
				$(".public-progress").css({
					"display": "none"
				});
			}, 2000);
		}

		function startVue() {
			vm = new Vue({
				el: "#app",
				data: {
					gdtt: ['50', '100', '200', '300', '500', '1000'],
					num: 0,
					list: [],
					integral: '',
					kefu: [],
					is_SignIn: true,
					tjr: '',
					codes: '',
				},
				created: function() {
					this.getUserInfo();
					this.isSignIn();
				},
				methods: {
					close: function() {
						api.closeToWin({
							name: 'root'
						});
						api.execScript({
							name: 'root',
							script: 'qhSelect(0);'
						});
					},
					shezhi: function() {
						api.openWin({
							name: 'shezhi',
							reload: true,
							url: './shezhi.html',
							pageParam: {
								avatar: vm.list.avatar,
								name: vm.list.nickname,
								phone: vm.list.phone,
							}
						});
					},
					zzad: function() {
						if (vm.list['Identity'] !== 2) {
							var dialogBox = api.require('dialogBox');
							dialogBox.alert({
								texts: {
									content: '您还不是站长，是否升级站长解锁该功能',
									leftBtnTitle: '取消',
									rightBtnTitle: '确认'
								},
								styles: {
									bg: '#fff',
									w: 300,
									corner: 2,
									content: {
										color: '#000',
										size: 14
									},
									left: {
										marginB: 7,
										marginL: 20,
										w: 130,
										h: 35,
										corner: 2,
										bg: '#fff',
										size: 12
									},
									right: {
										marginB: 7,
										marginL: 10,
										w: 130,
										h: 35,
										corner: 2,
										bg: '#fff',
										size: 12
									}
								}
							}, function(ret) {
								if (ret.eventType == 'left') {
									var dialogBox = api.require('dialogBox');
									dialogBox.close({
										dialogName: 'alert'
									});
								} else if (ret.eventType == 'right') {
									var dialogBox = api.require('dialogBox');
									dialogBox.close({
										dialogName: 'alert'
									});
									api.openWin({
										name: 'take_zz',
										reload: true,
										url: './take_zz.html',
									});
								}
							});
						} else {
							api.openWin({
								name: 'zzguanggao',
								reload: true,
								url: './zzguanggao.html',
							});
						}
					},
					//是否已签到
					isSignIn: function() {
						api.ajax({
							url: apiUrl + '/api/user/isSignIn',
							method: 'post',
							data: {
								values: {
									token: $api.getStorage('token'),
								},
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							if (ret.code == 1) {
								vm.is_SignIn = false;
							} else {
								vm.is_SignIn = true;
							}
						});
					},
					shuaxin: function() {
						history.go(0);
					},
					//联系客服(复制)
					copys: function() {
						var clipBoard = api.require('clipBoard');
						clipBoard.set({
							value: vm.codes
						}, function(ret, err) {
							if (ret) {
								api.toast({
									msg: '复制成功',
									duration: 2000,
									location: 'middle'
								});
								setTimeout(function() {
									$('#add-modifys').css({
										'display': 'none'
									});
								}, 500);
							}
						});
					},
					//联系客服(复制)
					copy: function() {
						var clipBoard = api.require('clipBoard');
						clipBoard.set({
							value: vm.kefu.wechat
						}, function(ret, err) {
							if (ret) {
								api.toast({
									msg: '复制成功',
									duration: 2000,
									location: 'middle'
								});
								setTimeout(function() {
									$('#add-modify').css({
										'display': 'none'
									});
								}, 500);
							}
						});
					},
					//修改头像
					uploadAvatar: function() {
						var result = hasPermission('photos'); //权限检测
						var text = '为了能够选择图片或文件,请设置相册权限,点击确定前往设置相册权限,点击取消拒绝';
						requestPermission(text, 'photos', result, function(bool) {
							if (bool) {
								var result = hasPermission('camera'); //权限检测
								var text = '为了能够拍照,请设置相机权限,点击确定前往设置相机权限,点击取消拒绝';
								requestPermission(text, 'camera', result, function(bool) {
									if (bool) {
										api.actionSheet({
											cancelTitle: '取消',
											buttons: ['打开相机', '打开相册']
										}, function(ret, err) {
											console.log(JSON.stringify(ret))
											var index = ret.buttonIndex;
											if (index == 1) {
												vm.getPicture('camera');
											} else if (index == 2) {
												vm.getPicture('album');
											}
										});
									} else {
										msg("获取当前相机权限失败!");
									}
								});
							} else {
								msg("获取当前相册权限失败!");
							}
						});
					},
					getPicture: function(method) {
						var self = this;
						api.getPicture({
							sourceType: method,
							encodingType: 'jpg',
							mediaValue: 'pic',
							destinationType: 'url',
							allowEdit: true,
							quality: 100,
							targetWidth: 400,
							targetHeight: 400,
							saveToPhotoAlbum: false
						}, function(ret, err) {
							if (ret) {
								api.ajax({
									url: apiUrl + '/api/user/edit',
									method: 'post',
									data: {
										values: {
											token:$api.getStorage('token'),
										},
										files: {
											file: ret.data,
										}
									}
								}, function(rets, err) {
									if (rets.code== 1) {
										api.toast({
											msg: '修改成功',
											duration: 2000,
											location: 'middle'
										});
										setTimeout(function() {
											window.location.reload(); //刷新当前页面.
										}, 500);
									} else {
										api.toast({
											msg: rets.msg,
											duration: 2000,
											location: 'middle'
										});
										setTimeout(function() {
											window.location.reload(); //刷新当前页面.
										}, 500);
									}
								});
							} else {}
						});
					},
					//退出登录
					logout: function() {
						var dialogBox = api.require('dialogBox');
						dialogBox.alert({
							texts: {
								content: '确定退出登录？',
								leftBtnTitle: '取消',
								rightBtnTitle: '确认'
							},
							styles: {
								bg: '#fff',
								w: 300,
								corner: 2,
								content: {
									color: '#000',
									size: 14
								},
								left: {
									marginB: 7,
									marginL: 20,
									w: 130,
									h: 35,
									corner: 2,
									bg: '#fff',
									size: 12
								},
								right: {
									marginB: 7,
									marginL: 10,
									w: 130,
									h: 35,
									corner: 2,
									bg: '#fff',
									size: 12
								}
							}
						}, function(ret) {
							if (ret.eventType == 'left') {
								var dialogBox = api.require('dialogBox');
								dialogBox.close({
									dialogName: 'alert'
								});
								location.reload();
							} else if (ret.eventType == 'right') {
								var dialogBox = api.require('dialogBox');
								dialogBox.close({
									dialogName: 'alert'
								});
								$api.clearStorage('uid');
								api.openWin({
									name: 'login',
									reload: true,
									url: './login.html',
								});
							}
						});
					},
					//联系客服
					zixun: function() {
						$('#add-modify').css({
							'display': 'block'
						});
						api.ajax({
							url: apiUrl + 'api/users/getKefuInfo',
							method: 'post',
							data: {
								values: {},
							}
						}, function(ret, err) {
							if (ret.status) {
								vm.kefu = ret.data;
							}
						});

					},

					//联系推荐人
					zixuntjr: function() {
						api.ajax({
							url: apiUrl + '/api/user/reference',
							method: 'post',
							data: {
								values: {
									token:$api.getStorage('token'),
								},
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							if (ret.code == 1) {
								$('#add-modifys').css({
									'display': 'block'
								});
								vm.tjr = ret.data;
								vm.codes = ret.data.wechat;
								if(vm.codes==""||vm.codes==null){
									msg('推荐人未绑定微信')
								}
							} else {
								msg(ret.msg);
								vm.codes = "";
								vm.tjr = "";
							}
						});
					},
					//关闭客服弹窗
					quxiao: function() {
						$('#add-modify').css({
							'display': 'none'
						});
					},
					quxiaos: function() {
						$('#add-modifys').css({
							'display': 'none'
						});
					},
					// 个人信息
					getUserInfo: function() {
						api.ajax({
							url: apiUrl + '/api/user/index',
							method: 'post',
							data: {
								values: {
									token: $api.getStorage('token'),
								},
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							if (ret.code == 1) {
								vm.list = ret.data;
							} else {
								vm.list = ret.data;
							}
						});
					},
					signIn: function() {
						api.ajax({
							url: apiUrl + '/api/user/signIn',
							method: 'post',
							data: {
								values: {
									token: $api.getStorage('token'),
								},
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							if (ret.code == 1) {
								vm.integral = ret.data;
								$('.qiandao-modify').css({
									'display': 'block'
								});
							} else if (ret.code == 2) {
								vm.is_SignIn = true;
								api.toast({
									msg: ret.msg,
									duration: 2000,
									location: 'middle'
								});
							} else {
								api.toast({
									msg: ret.msg,
									duration: 2000,
									location: 'middle'
								});
							}
						});
					},
					//关闭签到弹窗
					del: function() {
						$('.qiandao-modify').css({
							'display': 'none'
						});
						location.reload();
					},
				}
			})
		}
	</script>
</html>
